<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="referrer" content="never">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/animate.css">
    <script src="./js/common.js"></script>
    <script src="./js/vue.js"></script>
    <script src="./js/jquery-1.8.0.min.js"></script>
    <title>电影首页</title>
    <style>
        .tip-box {
            background-color: rgba(0,0,0,0.6);
            padding: 10px 20px;
            width: 100px;
            height: 40px;
            z-index: 1000;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            line-height: 40px;
            color: white;
            animation-name: showTip;
            animation-iteration-count: 1;
            /* animation-duration: 3s; */
            opacity: 0;
        }

        @keyframes showTip {
            0% {
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            90% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
    </style>
    <template id="navBar">
        <!-- 头部搜索框 start -->
        <nav class="nav-box">
            <div class="nav-input">
                <input type="text" @focus="showBtn=true" @blur="showBtn=false">
                <!-- <input type="text" @focus="changeShowBtn(true)" @blur="changeShowBtn(false)"> -->
            </div>
            <div v-show="showBtn" class="nav-btn">
                <span>搜索</span>
            </div>
        </nav>
        <!-- 头部搜索框 end -->
    </template>
    <!-- home页面所需的组件 -->
    <template id="filmItem">
        <!-- 电影展示组件 start -->
        <div class="film-item">
            <div class="film-img" style="background-image: url(./imgs/film.jpg)"></div>
            <div class="film-title">蚁人2：黄蜂女现身</div>
            <div class="film-source">
                <span class="star-img open"></span>
                <span class="star-img open"></span>
                <span class="star-img open"></span>
                <span class="star-img close"></span>
                <span class="star-img close"></span>
                <span class="star-source">7.9</span>
            </div>
        </div>
        <!-- 电影展示组件 end -->
    </template>
    <template id="filmList">
        <div>
            <!-- 电影展示组件 start -->
            <div class="film-item" v-for="(film,index) in list" :key="film.filmId" @click="pageName='Detail'">
                <div class="film-img" style="background-image: url('./imgs/timg.jpg');background-position:40% 50%;">
                </div>
                <div class="film-title">{{film.filmName}}</div>
                <div class="film-source">
                    <span class="star-img open"></span>
                    <span class="star-img open"></span>
                    <span class="star-img open"></span>
                    <span class="star-img close"></span>
                    <span class="star-img close"></span>
                    <span class="star-source">{{film.source|getSource()}}</span>
                </div>
            </div>
            <!-- 电影展示组件 end -->
        </div>
    </template>
    <template id="home">
        <div class="home-box">
            <!-- 首页分类列表 start -->
            <div v-for="(type,index) in types" :key="type.typeId">
                <div class="list-name">
                    <span>{{type.typeName}}</span>
                    <!-- <span class="list-more" @click="sendPage()">更多 > </span> -->
                    <span class="list-more" @click="pageName='Film'">更多 > </span>
                    <!-- <span class="list-more" @click="page='Film'">更多 > </span> -->
                </div>
                <!-- <div class="list-content">
                    <film-item v-for="(item,index) in 6" :key="index"></film-item>
                </div> -->
                <film-list class="list-content" :list="type.list"></film-list>
            </div>
            <!-- 首页分类列表 end -->
        </div>
    </template>
    <!-- films页面所需的组件 -->
    <template id="filmItem">
        <!-- 电影展示组件 start -->
        <div class="film-item">
            <div class="film-img" style="background-image: url(./imgs/film.jpg)"></div>
            <div class="film-title">蚁人2：黄蜂女现身</div>
            <div class="film-source">
                <span class="star-img open"></span>
                <span class="star-img open"></span>
                <span class="star-img open"></span>
                <span class="star-img close"></span>
                <span class="star-img close"></span>
                <span class="star-source">7.9</span>
            </div>
        </div>
        <!-- 电影展示组件 end -->
    </template>
    <template id="filmList">
        <div>
            <!-- 电影展示组件 start -->
            <div class="film-item" v-for="(film,index) in list" :key="film.filmId" @click="pageName='Detail'">
                <div class="film-img" style="background-image: url('./imgs/timg.jpg');background-position:40% 50%;">
                </div>
                <div class="film-title">{{film.filmName}}</div>
                <div class="film-source">
                    <span class="star-img open"></span>
                    <span class="star-img open"></span>
                    <span class="star-img open"></span>
                    <span class="star-img close"></span>
                    <span class="star-img close"></span>
                    <span class="star-source">{{film.source|getSource()}}</span>
                </div>
            </div>
            <!-- 电影展示组件 end -->
        </div>
    </template>
    <template id="film">
        <!-- 首页分类列表 start -->
        <div class="films-box">
            <div class="list-name">
                <span>热门电影</span>
            </div>
            <!-- <div class="content-list">
                <film-item v-for="(item,index) in 12" :key="index"></film-item>
            </div> -->
            <film-list class="content-list" :list="filmList"></film-list>
        </div>
        <!-- 首页分类列表 end -->
    </template>
    <!-- 电影详情页面组件 -->
    <template id="commentItem">
        <!-- 用户评论 start -->
        <div class="comment-item">
            <div class="user-img">
                <img :src="`./imgs/users/${comments.userImg}`">
            </div>
            <div class="user-info">
                <div class="user-name">
                    <span>{{comments.username}}</span>
                    <div class="film-source">
                        <span class="star-img open"></span>
                        <span class="star-img open"></span>
                        <span class="star-img open"></span>
                        <span class="star-img close"></span>
                        <span class="star-img close"></span>
                        <span class="star-source">{{comments.userSource|getSource}}</span>
                    </div>
                </div>
                <div class="user-time">{{comments.createTime}}</div>
            </div>
            <div class="user-conent">{{comments.userMsg}}</div>
        </div>
        <!-- 用户评论 end -->
    </template>
    <template id="bottomBar">
        <!-- 底部评论区 start -->
        <footer class="footer-box">
            <div class="comment-input" @click="showCommentBtn=true">不想说点什么吗？</div>
            <!-- <div v-show="showCommentBtn" class="comment-detail" @click.self="showCommentBtn=false"> -->
            <div v-show="showCommentBtn" class="comment-detail" @click="showCommentBtn=false">
                <!-- <div class="user-input"> -->
                <div class="user-input" @click.stop>
                    <h4>头像</h4>
                    <ul class="user-head" @click.capture.stop="userChoose($event)">
                        <li :class="{'user-choose':userComments.userImg==`user${item}.png`}"
                            :data-img="`user${item}.png`" :style="`background-image: url(./imgs/users/user${item}.png)`"
                            v-for="(item,index) in 24" :key="index">
                        </li>
                    </ul>
                    <h4>昵称</h4>
                    <input class="user-nikename" type="text" placeholder="昵称" v-model="userComments.userName">
                    <h4>评分</h4>
                    <div class="film-source reset-star">
                        <span class="star-img open"></span>
                        <span class="star-img open"></span>
                        <span class="star-img open"></span>
                        <span class="star-img close"></span>
                        <span class="star-img close"></span>
                        <span class="star-source">7.9</span>
                    </div>
                    <h4>评论</h4>
                    <textarea class="user-message" placeholder="留下点足迹..." v-model="userComments.userMsg"></textarea>
                    <div class="send-btn">
                        <span @click="showCommentBtn=false">关闭</span>
                        <span @click="sendComment()">发送</span>
                    </div>
                </div>
            </div>
        </footer>
        <!-- 底部评论区 end -->
    </template>
    <!-- 全局弹出框 -->
    <template id="tip">
        <div class="tip-box" :style="`animation-duration:${time}s;`">
            {{msg}}
        </div>
    </template>
    <template id="commentList">
        <div>
            <!-- 用户评论 start -->
            <div class="comment-item" v-for="comment in comments" :key="comment.commentId">
                <div class="user-img">
                    <img :src="`./imgs/users/${comment.userImg}`">
                </div>
                <div class="user-info">
                    <div class="user-name">
                        <span>{{comment.username}}</span>
                        <div class="film-source">
                            <span class="star-img open"></span>
                            <span class="star-img open"></span>
                            <span class="star-img open"></span>
                            <span class="star-img close"></span>
                            <span class="star-img close"></span>
                            <span class="star-source">{{comment.userSource|getSource}}</span>
                        </div>
                    </div>
                    <div class="user-time">{{comment.createTime}}</div>
                </div>
                <div class="user-conent">{{comment.userMsg}}</div>
            </div>
            <!-- 用户评论 end -->
        </div>
    </template>
    <template id="detail">
        <div>
        <!-- 电影详情 start -->
        <div class="detail-box">
            <!-- 电影名称 -->
            <div class="film-name">{{filmDetail.filmName}}</div>
            <!-- 电影信息 stat-->
            <div class="film-info">
                <div class="film-tip">
                    <div class="comment-count">
                        <div class="film-source">
                            <span class="star-img open"></span>
                            <span class="star-img open"></span>
                            <span class="star-img open"></span>
                            <span class="star-img close"></span>
                            <span class="star-img close"></span>
                            <span class="star-source">{{filmDetail.source|getSource()}}</span>
                        </div>
                        <div class="star-count">93601短评</div>
                    </div>
                    <div class="film-desc">
                        <p>
                            <span>上映时间:</span>{{filmDetail.filmYear}}</p>
                        <p>
                            <span>电影类型:</span>{{filmDetail.filmTypes}}</p>
                        <p>
                            <span>参演明星:</span>{{filmDetail.castNames}}</p>
                    </div>
                </div>
                <div class="film-img" style="background-image: url('./imgs/timg.jpg');background-position:40% 50%;" @click="pageName='Home'">
                </div>
            </div>
            <!-- 电影信息 end-->
            <!-- 电影简介 start -->
            <div class="film-plot">
                <div class="plot-title">剧情简介</div>
                <div class="plot-content">
                    {{filmDetail.filmDesc}}
                </div>
            </div>
            <!-- 电影简介 end -->
            <!-- 演员阵容 start -->
            <div class="film-actor">
                <div class="actor-title">导演演员</div>
                <div class="actor-list">
                    <div class="actor-item" v-for="(item,index) in castList" :key="index">
                        <div class="actor-img"
                            :style="`background-image: url('./imgs/timg.jpg');background-position:40% 50%;`"></div>
                        <div class="actor-name">{{item.name}}</div>
                    </div>
                </div>
            </div>
            <!-- 演员阵容 end -->
            <!-- 电影评论 start -->
            <div class="film-comments">
                <div class="comment-title">相关评论</div>
                <!-- <div class="comment-list">
                    <comment-item v-for="(comments,index) in userComments" :key="comments.commentId" :comments="comments"></comment-item>
                </div> -->
                <comment-list class="comment-list" :comments="userComments"></comment-list>
            </div>
            <!-- 电影评论 end -->
        </div>
        <!-- 电影详情 end -->
        <!-- <bottom-bar @film-detail="getFilmDetail" @user-comment="getUserComment"></bottom-bar> -->
        <bottom-bar @film-detail="getFilmDetail"></bottom-bar>
    </div>
    </template>
    <script>
        Vue.filter("getSource", function (arg) {
            return (arg * 1).toFixed(1) == "0.0" ? "暂无评分" : (arg * 1).toFixed(1);
        });
        Vue.prototype.$state=Vue.observable({
            pageName:"Home"
        });
        Vue.mixin({
            computed:{
                pageName:{
                    get(){
                        return this.$state.pageName;
                    },
                    set(nv){
                        this.$state.pageName=nv;
                    }
                }
            }
        });
        const Tips=Vue.extend({
            template:"#tip",
            data(){
                return{
                    msg:"",
                    time:3
                }
            },
            created() {
                // console.log(this.$el);
                this.$mount();
                // console.log(this.$el);
            },
            mounted(){
                document.body.appendChild(this.$el);
                setTimeout(()=>{
                    this.$destroy();
                    document.body.removeChild(this.$el);
                },this.time*1000);
            },
            beforeUpdate() {
            },
        });
        const Home = Vue.extend({
            template: "#home",
            components: {
                FilmItem: {
                    template: "#filmItem",
                },
                FilmList: {
                    template: "#filmList",
                    props: {
                        list: {
                            type: Array,
                            default() {
                                return []
                            }
                        }
                    },
                    filters: {
                        getSource(arg) {
                            return (arg * 1).toFixed(1);
                        }
                    }
                }
            },
            data() {
                return {
                    types: []
                }
            },
            methods: {
                loadType() {
                    $.ajax({
                        url: "http://127.0.0.1:8090/filmApi/loadTyps.php",
                        dataType: "json",
                        type: "post",
                        success: ({ result }) => {
                            this.types = result;
                            // console.log(this.types);
                            for (let i in this.types) {
                                this.loadFilmByTypeId(this.types[i].typeId, i);
                            }
                        }
                    })
                },
                loadFilmByTypeId(typeId, i) {
                    $.ajax({
                        url: "http://127.0.0.1:8090/filmApi/loadFilms.php",
                        dataType: "json",
                        type: "post",
                        data: {
                            typeId
                        },
                        success: ({ result }) => {
                            // console.log(result);
                            // this.types[i].list=result;
                            this.$set(this.types[i], "list", result);
                        }
                    })
                },
                // sendPage(){
                //     // console.log(this);
                //     this.$emit("update:page","Film");
                // }
            },
            // props:{
            //     pageName:{
            //         type:String,
            //         default:"Film"
            //     }
            // },
            mounted() {
                this.loadType();
                console.log(this.$attrs);
            },
            // computed:{
            //     page:{
            //         get(){
            //             return this.pageName;
            //         },
            //         set(nv){
            //             this.$root.$emit("update:page",nv);
            //         }
            //     }
            // }
        });
        const Film = Vue.extend({
            template: "#film",
            components: {
                FilmItem: {
                    template: "#filmItem",
                },
                FilmList: {
                    template: "#filmList",
                    props: {
                        list: {
                            type: Array,
                            default() {
                                return []
                            }
                        }
                    },
                    filters: {
                        getSource(arg) {
                            return (arg * 1).toFixed(1);
                        }
                    }
                }
            },
            data() {
                return {
                    filmList: []
                }
            },
            methods: {
                loadFilm() {
                    $.ajax({
                        url: "http://127.0.0.1:8090/filmApi/loadFilms.php",
                        type: "post",
                        data: {
                            size: 11
                        },
                        dataType: "json",
                        success: ({ result }) => {
                            console.log(result);
                            this.filmList = result;
                        }
                    })
                }
            },
            mounted() {
                this.loadFilm();
            }
        });
        const Detail = Vue.extend({
            template: "#detail",
            components: {
                CommentItem: {
                    template: "#commentItem",
                    props: {
                        comments: {
                            type: Object,
                            default() {
                                return {}
                            }
                        }
                    }
                },
                BottomBar: {
                    template: "#bottomBar",
                    data() {
                        return {
                            showCommentBtn: false,
                            userComments: {
                                userImg: "user1.png",
                                userName: "",
                                userSource: 7,
                                userMsg: ""
                            },
                            filmDetail: {}
                        }
                    },
                    methods: {
                        userChoose(arg) {
                            // console.log(arg.target.dataset.img);
                            this.userComments.userImg = arg.target.dataset.img ? arg.target.dataset.img : this.userComments.userImg;
                        },
                        loadDetail() {
                            $.ajax({
                                url: "http://127.0.0.1:8090/filmApi/loadFilmById.php",
                                type: "post",
                                dataType: "json",
                                data: {
                                    filmId: 1292052
                                },
                                success: ({ result }) => {
                                    this.filmDetail = result;
                                    this.$emit("film-detail", this.filmDetail);
                                }
                            });
                        },
                        showTip(msg = "默认值", time = 3) {
                            let Tip = new Tips();
                            Tip.msg = msg;
                            Tip.time = time;
                        },
                        sendComment() {
                            $.ajax({
                                url: "http://127.0.0.1:8090/filmApi/addComment.php",
                                type: "post",
                                dataType: "json",
                                data: {
                                    ...this.userComments,
                                    filmId: 1292052
                                },
                                success: (res) => {
                                    // console.log(res);
                                    if (res.resultState) {
                                        this.showTip(res.msg);
                                    } else {
                                        this.showTip(res.msg);
                                    };
                                }
                            })
                            // this.$emit("user-comment",{
                            //     ...this.userComments,
                            //     userTime:new Date().toLocaleString()
                            // });
                            this.userComments = {
                                userImg: "user1.png",
                                userName: "",
                                userSource: 7,
                                userMsg: ""
                            };
                            this.showCommentBtn = false;
                        }
                    },
                    mounted() {
                        this.loadDetail();
                        // console.log(Tips);
                    }
                },
                CommentList: {
                    template: "#commentList",
                    props: {
                        comments: {
                            type: Array,
                            default() {
                                return []
                            }
                        }
                    }
                }
            },
            data() {
                return {
                    filmDetail: {},
                    castList: [],
                    userComments: [],
                }
            },
            methods: {
                getFilmDetail(arg) {
                    this.filmDetail = arg;
                    this.castList = JSON.parse(this.filmDetail.castList);
                },
                // getUserComment(arg){
                //     this.userComments.unshift(arg);
                // }
                loadComment() {
                    $.ajax({
                        url: "http://127.0.0.1:8090/filmApi/loadComments.php",
                        type: "post",
                        dataType: "json",
                        data: {
                            filmId: 1292052
                        },
                        success: ({ result }) => {
                            this.userComments = result;
                        }
                    });
                }
            },
            mounted() {
                this.loadComment();
            }
        });

        window.onload = function () {
            new Vue({
                el: ".app",
                components: {
                    NavBar: {
                        template: "#navBar",
                        data() {
                            return {
                                showBtn: false
                            }
                        },
                        methods: {
                            changeShowBtn(arg) {
                                // console.log(arg);
                                this.showBtn = arg;
                            }
                        }
                    },
                    Home: Home,
                    Film: Film,
                    Detail: Detail
                },
                // data: {
                //     pageName: "Home"
                // },
                methods:{
                    // changePage(arg){
                    //     // console.log(arg);
                    //     this.pageName=arg;
                    // }
                },
                beforeMount() {
                    this.$root.$on("update:page",(arg)=>{
                        this.pageName=arg;
                    });
                },
            })
        }
    </script>
</head>

<body>
    <!-- 项目容器 start-->
    <div class="app">
        <!-- 头部搜索框 start -->
        <nav-bar></nav-bar>
        <!-- 头部搜索框 end -->
        <!-- 首页正文 start -->
        <div class="content-box">
            <transition
                enter-active-class="animated slideInRight"
                leave-active-class="animated slideOutLeft"
            >
                <keep-alive>
                    <component :is="pageName"></component>
                </keep-alive>
            </transition>
            <!-- <component :is="pageName" @update:page="changePage"></component> -->
            <!-- <component :is="pageName" :pageName="pageName"></component> -->
            <!-- <component :is="pageName" :page.sync="pageName"></component> -->
        </div>
        <!-- 首页正文 end -->
    </div>
    <!-- 项目容器 end-->

</body>

</html>